<template>
	<view>
		<view v-for="(item, index) in findList" :key="item.id" class="order-list card">
			<view style="line-height: 70rpx;">
				<view class="flex flex-ai-c flex-jc-sb" style="margin-top: 16rpx;">
					<view class="flex flex-ai-c">
						<view class="card-top-left flex-ai-c" v-if="item.orderStatus !== 0">
							<view style="color: #EB5C02;" class="title">已报价：{{ item.carFindListQuotedUsers.length }}人
							</view>
							<view v-for="(item1, index) in item.carFindListQuotedUsers" style="margin-left: 10rpx;"
								:key="index">
								<view class="flex flex-ai-c">
									<image :src="item1.headPortrait" mode="aspectFit"
										style="width: 50rpx;height: 50rpx;border-radius: 50%;"></image>
								</view>
							</view>
						</view>
					</view>
					<view class="card-top-right">{{ findStatus[item.orderStatus] }}</view>
				</view>
			</view>


			<view @click="gotoFindCar(item, item.id)">

				<view class="card-middle">
					<view class="card-middle-content flex flex-ai-fs">
						<view class="card-middle-content__img flex flex-ai-c width">
							<!-- 车型： -->
							<image class="item-img"
								:src="'https://files.yzsheng.com/goodimg/brandimg/' + item.brand_Id + '.png'"
								mode="aspectFit"></image>
							<view><text style="font-size: 28rpx;">车</text>型：</view>

						</view>

						<view class="card-middle-content__title">{{ item.car_Type_Name }} {{ item.configuration_Name }}
						</view>
					</view>
				</view>

				<!-- 外观 -->
				<view style="padding-bottom: 30rpx;" v-if="item.colour !== ''">
					<view class="title flex flex-ai-c">
						<view class="width">外观内饰：</view>
						<view class="flex flex-ai-c colorList">
							<view class="flex flex-ai-c flex-wrap-w">
								<view class="color"
									:style="{ background: JSON.parse(item.colour).outerColour[0].colorCoding }"></view>
								<view>外观+内饰</view>
								<view class="colorCoding flex"
									v-if="JSON.parse(item.colour).inColour[0].colorCoding.split('/').length <= 2">
									<view class="color" style="margin-left: 10rpx;"
										:style="{ background: JSON.parse(item.colour).inColour[0].colorCoding.split('/')[0] }">
									</view>
									<!-- <view class="color" :style="{ background: JSON.parse(item.colour).inColour[0].colorCoding.split('/')[1] }"></view> -->
								</view>
								<view v-else>
									<view class="color"
										:style="{ background: JSON.parse(item.colour).inColour[0].colorCoding.split('/')[0] }">
									</view>
								</view>
							</view>
						</view>
						<view></view>
					</view>
				</view>
			</view>


			<!-- btn -->
			<view class="card-bottom" v-if="item.orderStatus === 2">
				<view class="card-bottom-operate">
					<!-- @click="contact2(item.carFindListQuotedUsers[0])" -->
					<view class="card-bottom-operate__btn" @click="gotoFindCar(item, item.id)">
						<i-icon icon="iconxiaoxi" type="single" size="32rpx"></i-icon>
						<text>在线咨询</text>
					</view>
					<view class="card-bottom-operate__btn" @click="phone(item.carFindListQuotedUsers[0].mobile)">
						<i-icon icon="icondianhua" type="single" size="28rpx"></i-icon>
						<text>致电我们</text>
					</view>
				</view>
			</view>
			<view class="card-bottom" v-if="item.orderStatus === 1">
				<view class="card-bottom-operate">
					<view class="card-bottom-operate__btn" @click="gotoFindCar(item, item.id)"><text>确认报价</text></view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		name:'findCarList',
		props:{
			findList:{
				type:Array,
				default:()=>[]
			}
		},
		data(){
			return {
				findStatus: ['待报价', '待确认', '已完成'],
			}
		},
		methods:{
			// 拨打电话
			phone(num) {
			  console.log(num)
			  uni.makePhoneCall({
			    phoneNumber: num
			  })
			},
			//跳转寻车订单详情
			gotoFindCar(item, id) {
			  uni.navigateTo({
			    url: '/pages_order/carSearchDetails/carSearchDetails?id=' + id
			  })
			},
		}
	}
</script>

<style lang="scss">
	@import '../orderCenter.scss';
</style>
